<template>
	<view  class='my-path-list'>
		
		<view class='path-list'
		v-for='(item,index) in list' :key='index'
		@tap='toAddPath(index)'
		>
			<view class='path-item' @tap='goConfirmOrder(item)'>
				<view class='item-main'>
					<view class='item-name'>{{item.name}}</view>
					<view>{{item.tel}}</view>
				</view>
				<view class='item-main'>
					<view class='active' v-if='item.isDefault == 1 '>默认</view>
					<view>{{item.province}} {{item.city}} {{item.district}} {{item.address}}</view>
				</view>
			</view>
		</view>
		
		<view class='add-path'>
			<view class='add-path-btn' @tap='goAddPath'>新增地址</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				// list:[]
				isSelectedPath:false // 判断是否从 结算 进入的
			}
		},
		
		computed:{
			...mapState({
				list:state=>state.path.list,
			})
		},
		
		methods: {
			...mapMutations(['__initAddressList']),
			//初始化 （请求收货地址接口）
			__initAddress(){
				$http.request({
					url:"/selectAddress",
					method:"POST",
					header:{
						token:true
					}
				}).then((res)=>{
					console.log(res);
					this.__initAddressList(res);
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			
			//修改
			toAddPath(index){
				let pathObj = JSON.stringify({
					index:index,
					item:this.list[index]
				})
				uni.navigateTo({
					url:"../my-add-path/my-add-path?data="+pathObj+""
				})
				
			},
			
			// 新增
			goAddPath(){
				uni.navigateTo({
					url:"../my-add-path/my-add-path"
				})
			},
			
			//返回确认订单页面
			goConfirmOrder(item){
				//如果是从确认订单过来的执行以下代码:
				if(this.isSelectedPath){
					// console.log(item); // 用户 需要使用的地址
					//自定义事件：页面通讯 $emit触发；$on接受
					uni.$emit('selectPathItem',item);
					//返回上一页
					uni.navigateBack({
						delta:1
					})
				}
			},
		},
		onLoad(e){
			// 确认订单过来
			if(e.type==='selectedPath'){
				// console.log('确认订单过来');
				this.isSelectedPath = true;
			}
			//初始化拿到收货地址数据
			// this.__initAddress();
		},
	}
</script>

<style scoped>
.path-list{
	padding-left:20rpx;
}
.path-item{
	padding:10rpx;
	border-bottom:2rpx solid #CCCCCC;
}
.item-main{
	display: flex;
	align-items: center;
	margin-top: 10px;
}
.item-name{
	padding-right:10rpx;
}
.active{
	margin-right: 10px;
	padding:10rpx;
	background-color: #49BDFB;
	color:#FFFFFF;
	border-radius: 26rpx;
	font-size:24rpx;
	text-align: center;
}
.add-path{
	padding:20rpx;
	width:100%;
	display: flex;
	justify-content: center;
}
.add-path-btn{
	border:2rpx solid #49BDFB;
	color:#49BDFB;
	border-radius: 30rpx;
	padding:6rpx 60rpx;
}
</style>
